<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Rentpad Invitees</title>
        <style>
            a {color:#404042;text-decoration:none;}      /* unvisited link */
            a:visited {color:#404042;}  /* visited link */
            a:hover {color:#404042;}  /* mouse over link */
            a:active {color:#404042;}  /* selected link */
        </style>
        <script type="text/javascript" src="js/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/token/jquery.tokeninput.js"></script>  
        <script type="text/javascript">
            $(function() {
                $("#table-invites tr:even").css("background-color", "#fafafa");
            });                 
        </script>
    </head>

    <body style="text-align: center; background-color: #FAFAFA; color: #404042; font-family: Century Gothic, Calibri, Verdana; padding: 0px; margin: 0px;">                

        <div style="margin-top: 0px; background-color: white;">

            <%@include file="header.jsp" %>

            <div style="width: 100%; text-align: left; font-family: Century Gothic, Calibri, Verdana; color: #404042; background-color: white; background: url('${model.props.appPath}/img/content-bg-short.jpg'); background-repeat: repeat-x; display: block; position: relative; top: -2px;">

                <div style="width: 1020px; margin-top: 10px; margin: 0 auto;">

                    <br>
                    <br>
                    
                    <form style="background-color: #fafafa; font-size: 15px;">
                        <fieldset>
                            <legend>Add Mobile Invitee</legend>
                            <table style="font-size: 15px;" cellpadding="5" cellspacing="5">
                                <tr>
                                    <td>Name:</td>
                                    <td>
                                        <input type="text" name="name" style="padding:5px; width: 300px;"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Mobile:</td>
                                    <td>
                                        <input type="text" name="mobile" style="padding:5px; width: 300px;"/>                                    
                                    </td>
                                </tr>
                                <tr>
                                    <td>Mobiles:</td>
                                    <td>
                                        <textarea name="multiMobile" style="padding:5px; width: 300px; height: 200px;">

                                        </textarea>                                   
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>
                                        <input type="hidden" value="33" name="a"/>
                                        <input type="submit" value=" Add Mobile Invitee " />
                                    </td>
                                </tr>
                            </table>
                        </fieldset>                        
                    </form>
                    
                    <br>                    
                    <br>
                    
                    <h1>Mobile Invitees</h1>
                    
                    <table id="table-invites" border="1" cellpadding="5" cellspacing="5" style="width:100%; border-collapse: collapse; font-size: 13px;">
                        <tr>
                            <th></th>
                            <th>Name</th>
                            <th>Mobile</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                        <c:set var="i" value="0"/>
                        <c:forEach items="${model.mobileInvitees}" var="mobileInvitee">
                            <c:set var="i" value="${i+1}"/>
                            <tr>
                                <td align="center">${i}</td>
                                <td align="center">${mobileInvitee.name}</td>
                                <td align="center">${mobileInvitee.mobile}</td>
                                <td align="center">
                                    <span style="color: blue"><c:if test="${mobileInvitee.processed}">processed</c:if></span>
                                    <span style="color: orange"><c:if test="${!mobileInvitee.processed}">queued</c:if></span>
                                </td>
                                <td align="center">
                                    <a href="${model.props.appPath}/invite.htm?a=35&mobile=${mobileInvitee.mobile}"><input type="button" value=" Delete "/></a>
                                        
                                </td>
                            </tr>
                        </c:forEach>
                    </table>

                        
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    
                    <form style="background-color: #fafafa; font-size: 15px;">
                        <fieldset>
                            <legend>Set Processed Mobile Invitee</legend>
                            <table style="font-size: 15px;" cellpadding="5" cellspacing="5">
                                <tr>
                                    <td>Mobiles:</td>
                                    <td>
                                        <textarea name="multiMobile" style="padding:5px; width: 300px; height: 200px;">

                                        </textarea>                                   
                                    </td>
                                </tr>
                                <tr>
                                    <td>Processed:</td>
                                    <td>
                                        <input name="strProcessed" type="text" value=" empty = not processed" />                                
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>
                                        <input type="hidden" value="38" name="a"/>
                                        <input type="submit" value=" Set Processed Mobile Invitees " />
                                    </td>
                                </tr>
                            </table>
                        </fieldset>                        
                    </form>
                    
                    <br>                    
                    <br> 
                    <br>
                    <br>                

                    <div style="font-size: 14px;">
                        List: 
                        <br><br>
                        <c:forEach items="${model.mobileInvitees}" var="mobileInvitee">
                            ${mobileInvitee.mobile}<br>
                        </c:forEach>
                    </div>

                    <br><br> 

                    <div style="font-size: 14px;">
                        CSV: &nbsp;&nbsp;
                        <c:forEach items="${model.mobileInvitees}" var="mobileInvitee">
                            ${mobileInvitee.mobile},
                        </c:forEach>
                    </div>
                
                </div>

                
                
                <br><br> 
            </div>

            <div>
                <img src="${model.props.appPath}/img/footer-foot.jpg" style="border: 0px solid black; display: block; width: 100%;" />
            </div>

        </div>

    </body>
    
</html>
